<template>
<!-- scrollView -->
<scroll-view @scroll="changeTop"  scroll-y="true" enable-flex class="homeScroll" @scrolltolower="changeScrollLower" >
	<view class="homeItem">
		<!-- logo -->
		<view class="logo">
			<image class="logoImg" src="../../static/images/logo.png" mode=""></image>
		</view>
		<!-- 搜素文本框 -->
		<!-- 滑动的时候会变成[object,object]-->
		<view class="search"  :style="[{position:isFixed,top:scrollTop+'rpx'}]"    >
			<text class="iconfont icon-sousu"></text>
			<input type="text" placeholder="请输入搜素关键字" class="text" placeholder-class="color:#aaa">
		</view>
		<!-- 轮播图 -->
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" class="swiper">
			<swiper-item v-for="(banner,index) in bannerInfo.content":key="index">
				<view class="swiper-item">
					<image class="Img" :src="banner.src" mode=""></image>
				</view>
			</swiper-item>
		</swiper>
	<!-- 图片列表 -->
	<Card v-for="(img,index) in imgList":key="index" :img="img" :index="index" ></Card>
<!-- 	<Card></Card>
	<Card></Card> -->
	<!-- 更多内容 -->
	<view class="allInfo">更多内容</view>
	<view class="main">
		<view class="leftList">
			<view class="leftItem" v-for="(left,index) in allManyList":key="index">
				<image class="goodsImg" :src="left.src"    mode=""></image>
				<text class="goodsText">{{left.name}}</text>
				<text class="goodsPrice">{{left.price}}</text>
			</view>
		</view>
	</view>
	</view>
</scroll-view>
</template>

<script>
	import Card from './components/Card/index.vue'
	import {mapState} from 'vuex'
	export default {
		data() {
			return {
				// 距离上部的高度问题
				scrollTop:80,
				// 控制positio的定位相关
				isFixed:'absolute'
			}
		},
		components:{
			Card
		},
		mounted() {
	     this.getHomeList()
			 // 获取更多内容数据
			 this.getindexList()
			 // 
			 this.getlowerList()
			// console.log(this.manyList)
			// 获取滚动的位置
			
		},
		onLoad() {
 
		},
		methods: {
       getHomeList(){
				 this.$store.dispatch('home/getHomeList')
			 },
			 getindexList(){
				 this.$store.dispatch('home/getindexList')
			 },
			 getlowerList(){
				 this.$store.dispatch('home/getlowerList')
			 },
			// 滚动
			 changeTop(event){
			 	console.log(event.detail.scrollTop)
				// 判断距离顶部的高度实现固定定位和绝对定位的切换
				if(event.detail.scrollTop > 81){
					// 设置成固定定位
					this.scrollTop = 0
					this.isFixed = 'fixed'
				}
			 },
			 
		},
		computed:{
			...mapState('home',['homeList','indexList','lowerList']),
			// 计算轮播图的数据
			bannerInfo(){
				return this.homeList[0] || {}
			},
			// 获取大图card数据
			imgList(){
				return this.homeList.filter(item => item.type === 'oneColumn')
			},
			leftManyList(){
				return this.indexList.map(item =>{
					return {
						name:item.skuName,
						src:item.images,
						price:item.originalPrice
					}
				})
			},
			lowerManyList(){
				return this.lowerList.map(item =>{
					return {
						name:item.skuName,
						src:item.images,
						price:item.originalPrice
					}
				})
			},
			allManyList(){
				return this.leftManyList.concat(this.lowerManyList)
			}
		}
	}
</script>

<style lang="stylus">
	.homeScroll
		height: calc(100Vh)
		.homeItem
			position: relative
			height: 100%
			.logo
				position: absolute
				z-index: 2
				width: 50upx
				height: 50upx
				left: 0
				right: 0
				top: 10upx
				margin:auto
				.logoImg
					width: 50upx
					height: 50upx
					border-radius: 50%
			.search
				z-index: 999
				// position:absolute
				// top: 80upx
				left: 0
				right: 0
				margin:0upx  auto 0 auto
				display: flex
				height: 64upx
				width: 700upx
				box-sizing: border-box
				background-color: white
				border: 2upx solid #aaa
				border-radius: 10upx
				padding: 0 12upx
				.iconfont
					text-align: center
					line-height: 64upx
					font-size: 50upx
					color: #aaa
					padding: 0 10upx
				.text
					line-height: 64upx
					height: 64upx
			.swiper
				height: 446upx
				.Img
					width: 100%
			.allInfo
				font-size: 44upx
				height: 75upx
				padding: 0 48upx
				line-height: 75upx
				font-weight:bold
			.main
				margin: 0 20upx
				.leftList
					display: flex
					flex-wrap: wrap
					.leftItem
						width: 336upx
						display: flex
						flex-direction: column
						background-color:#fafafa
						margin: 12upx 6upx
						padding-bottom: 24upx
						box-sizing: border-box
						border-radius: 30upx
						.goodsImg
							height: 336upx
							display: block
							width: 336upx
							// border-radius: 30upx
						.goodsText
							width: 336upx
							box-sizing: border-box
							padding: 0 24upx
							margin: 5upx 0
							font-size: 28upx
						.goodsPrice
							padding: 0 24upx
							margin: 5upx 0
					
			

</style>
